<template>
  <div v-if="componentShowMap.showUserComment">
    <CommentBox
      :commentInfo="commentInfo"
      @submit-box="submitBox"
    ></CommentBox>
    <div class="message_infos">
      <CommentList :tableName="tableName" :comments="comments" :authorUid="authorUid" :marginLeft="marginLeft" :commentInfo="commentInfo" :maxReplyLevel="maxReplyLevel"></CommentList>
      <!-- <div class="noComment" v-if="comments.length === 0">还没有评论，快来抢沙发吧！</div> -->
       <!--加载更多-->
      <LoadMore @loadMore="loadMore" :length="comments.length" :isEnd="isEnd" :loading="loading"></LoadMore>
    </div>
  </div>
</template>

<script>
  import CommentList from "@/components/Comment/CommentList";
  import CommentBox from "@/components/Comment/CommentBox"
  import LoadMore from "@/components/Comment/LoadMore"
  import {addMemberComment, getMemberCommentList} from "../../api/comment";
  import {mapMutations} from "vuex";
  export default {
    name: 'Comment',
    props: {
      targetId: [Number, String],
      tableName: {
        type: String,
        default: '',
      },
      // 控制最大评论层级
      maxReplyLevel: {
        type: Number,
        default: 5,
      },
      // 左边偏移量
      marginLeft: {
        type: Number,
        default: -3,
      },
      // 作者UID
      authorUid: {
        type: String,
        default: '',
      },
    },
    components: {
      //注册组件
      CommentList,
      CommentBox,
      LoadMore
    },
    data() {
      return {
        comments: [],
        currentPage: 1,
        pageSize: 10,
        isEnd: false, //是否到底底部了
        loading: false, //是否正在加载
        componentShowMap: {},
        commentInfo: {
          memberUid: this.targetId,
          source: this.tableName
        }
      }
    },
    computed: {

    },
    watch: {
      targetId:{
        //深度监听，可监听到对象、数组的变化
        handler(newValue, oldVal){
          console.log("targetId", newValue)
          this.commentInfo.memberUid = newValue;
          this.getCommentDataList();
        }
      },
      '$store.state.app.webConfigData': function (event, oldFlag) {
        this.getComponentShowMap()
      },
    },
    mounted () {
      let that = this;
      console.log(this.targetId, "this.targetId")
      if (this.targetId) {
        this.commentInfo.memberUid = this.targetId;
      }
      this.getCommentDataList();
      this.getComponentShowMap()
      // let after = 0;
      // let offset = 200
      // $(window).scroll(function () {
      //   let docHeight = $(document).height(); // 获取整个页面的高度(不只是窗口,还包括为显示的页面)
      //   let winHeight = $(window).height(); // 获取当前窗体的高度(显示的高度)
      //   let winScrollHeight = $(window).scrollTop(); // 获取滚动条滚动的距离(移动距离)

      //   if (winScrollHeight < offset) {
      //     that.showStickyTop = false
      //   } else {
      //     that.showStickyTop = true
      //   }
      //   after = winScrollHeight;
      //   //还有30像素的时候,就查询
      //   if(docHeight == winHeight + winScrollHeight){
      //     if(that.comments.length >= that.total) {
      //       return;
      //     }
      //     let params = {};
      //     params.source = that.commentInfo.source;
      //     params.memberUid = that.commentInfo.memberUid;
      //     params.currentPage = that.currentPage + 1
      //     params.pageSize = that.pageSize;
      //     params.openSecondLevel = true;
      //     console.log("params.memberUid2", params.memberUid)
      //     getMemberCommentList(params).then(response => {
      //       if (response.code == that.$ECode.SUCCESS) {
      //         that.comments = that.comments.concat(response.data.records);
      //         that.setCommentList(that.comments);
      //         that.currentPage = response.data.current;
      //         that.pageSize = response.data.size;
      //         that.total = response.data.total;
      //       }
      //     });
      //   }
      // })
    },

    methods: {
      ...mapMutations(["setCommentList", 'setDomainEventMessage']),
      getComponentShowMap() {
        let webConfigData = this.$store.state.app.webConfigData
        this.componentShowMap = webConfigData.componentShowMap
      },
      // 发表评论
      submitBox(e) {
        let params = {};
        params.source = e.source;
        params.createUserUid = e.createUserUid;
        params.content = e.content;
        params.memberUid = e.memberUid;
        addMemberComment(params).then(response => {
          if (response.code === this.$ECode.SUCCESS){
            if(response.data.auditStatus === "2") {
              this.$message.success("评论成功！");
            } else {
              this.$message.warning("提交成功，请耐心等待审核~");
            }
            // this.getCommentDataList();
            let commentData = response.data
            this.comments.unshift(commentData)
            this.isEnd = false
            // 发送点赞的领域事件
            let event = {
              "type": "action",
              "action": this.$EAction.Comment,
              "resourceUid": e.memberUid,
              "resourceType": "RANK_MEMBER",
              "time": new Date(),
            }
            this.setDomainEventMessage(event)
          }else{
            this.$message.error(response.message)
          }
        });
      },
// 追加内容
updateCommentList(commentList, uid, targetComment) {
        if (commentList == undefined || commentList.length <= 0) {
          return;
        }
        for (let item of commentList) {
          let replyList = item.replyList;
          if (replyList == null) {
            replyList = []
          }
          if (item.uid == uid) {
            replyList.unshift(targetComment);
            item.replyList = replyList
            return;
          }
          for (let reply of replyList) {
            if (reply.uid == uid) {
              replyList.unshift(targetComment);
              item.replyList = replyList
              return;
            }
          }
        }
      },
      loadMore() {
        
        console.log("点击加载更多")
        let that = this
        let params = {};
        params.source = that.commentInfo.source;
        params.memberUid = that.commentInfo.memberUid;
        params.currentPage = that.currentPage + 1
        params.pageSize = that.pageSize;
        params.openSecondLevel = true;
        this.loading = true
        console.log("params.memberUid2", params.memberUid)
        getMemberCommentList(params).then(response => {
          
          if (response.code === this.$ECode.SUCCESS && response.data.records.length > 0) {
            let newDataList = response.data.records
            this.comments = this.comments.concat(response.data.records);
            this.setCommentList(this.comments);
            this.currentPage = response.data.current;
            this.pageSize = response.data.size;
            this.total = response.data.total;
            //全部加载完毕
            if (newDataList.length < this.pageSize) {
              this.isEnd = true;
            }
            if (this.comments.length === this.total) {
              this.isEnd = true;
            }
          } else {
            this.isEnd = true;
          }
          this.loading = false
        });

      },
      getCommentDataList: function() {
        let source = this.commentInfo.source
        let memberUid = this.commentInfo.memberUid
        if(source == "RANK_MEMBER_INFO" && !memberUid) {
          return
        }
        if(source == "PROBLEM_INFO" && !memberUid) {
          return
        }
        let params = {};
        params.source = this.commentInfo.source;
        params.memberUid = this.commentInfo.memberUid;
        params.currentPage = this.currentPage;
        params.pageSize = this.pageSize;
        params.openSecondLevel = true;
        console.log("params.memberUid3", params.memberUid)
        getMemberCommentList(params).then(response => {
          if (response.code == this.$ECode.SUCCESS) {
            this.comments = response.data.records;
            this.setCommentList(this.comments);
            this.currentPage = response.data.current;
            this.pageSize = response.data.size;
            this.total = response.data.total

            let newDataList = response.data.records
            if (newDataList.length < this.pageSize) {
              this.isEnd = true;
            }
            if (this.comments.length === this.total) {
              this.isEnd = true;
            }
          }
        });
      },
    }
  };
</script>


<style scoped>
  .noComment {
    width: 100%;
    text-align: center;
  }
</style>
